<template>
	<view class="loginBox">
		<view class="formBox">
			<u--form
				:model="model1"
				:rules="rules"
				ref="uForm"
				labelWidth="160"
				:labelStyle='lstyle'
				>
				<u-form-item
					style="margin-bottom: 30upx;"
					label="真实姓名"
					prop="userInfo.name"
					required
					borderBottom
					ref="item1">
						<u--input
							v-model="model1.userInfo.name"
							placeholder="请输入真实姓名"
							border="none"
							clearable
						></u--input>
				</u-form-item>
				
				
				<u-form-item
				style="margin-bottom: 30upx;"
						label="性别"
						prop="userInfo.sex"
						borderBottom
						@click="showSex = true;"
						ref="item1">
					<u--input
							v-model="model1.userInfo.sex"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择性别"
							border="none"
							
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				
				<u-action-sheet
						:show="showSex"
						:actions="actions"
						title="请选择性别"
						@close="showSex = false"
						@select="sexSelect"
				>
				</u-action-sheet>
				
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="年龄"
					prop="userInfo.age"
					required
					borderBottom
					clearable
					ref="item1">
						<u--input
							v-model="model1.userInfo.age"
							placeholder="请输入年龄"
							border="none"
						>
						</u--input>
				</u-form-item>
				
				
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="联系方式"
					prop="userInfo.phone"
					required
					borderBottom
					clearable
					ref="item1">
						<u--input
							v-model="model1.userInfo.phone"
							placeholder="请输入联系方式"
							border="none"
						>
						</u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="备注"
					prop="userInfo.remarks"
					borderBottom
					clearable
					ref="item1">
						<u--textarea v-model="model1.userInfo.remarks" placeholder="请填写备注" count ></u--textarea>
				</u-form-item>
				
				
				
				
				
			</u--form>
			
			
			
			
			<button class="btn" @click="submit" type="default">提 交</button>
		</view>
		
	</view>
</template>

<script>
import {
	setMsg,
	addUser,
	userLogin} 
	from '@/api/login.js'
export default {
	data() {
		return {
			showSex: false,
			actions: [{
				name: '男',
				},
				{
					name: '女',
				}
			],
			tips: '',
			value: '',
			model1: {
				userInfo: {
					name: '',
					sex:'',
					age:'',
					phone:'',
					remarks:''
				},
			},	
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				},
				
				'userInfo.age':[
					{
						type: 'string',
						required: true,
						message: '请填写年龄',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.idCard()就是返回true或者false的
							return uni.$u.test.enOrNum(value);
						},
						message: '输入的年龄不是一个数字',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				
				'userInfo.phone': [
					{
						type: 'string',
						required: true,
						message: '请填写联系方式',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '联系方式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
					
				],
				
				
			},
			
		};
	},
	
	computed: {
	    lstyle() {
	      return {
	        fontWeight: 'bold',
			fontSize:'30upx'
	      }
		}
	},
	
	onShow() {
		
	},
	mounted(){
		
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
		codeChange(text) {
		    this.tips = text;
		},
		//向后端请求验证码
		getCode() {
			const phone = this.model1.userInfo.phone
				if(uni.$u.test.mobile(phone)){
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setMsg({phone:phone}).then(res=>{
							uni.hideLoading();
							console.log(res,"==============");
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast(res.retMsg);
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
								 
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请输入正确的手机号');
				}
		},
		 
		submit() {
			this.$refs.uForm.validate().then(res => {
				uni.showLoading({
					title:'加载中...',
				})
				const params = this.model1.userInfo	
				userLogin(params).then(res=>{
					uni.hideLoading()
					if(res.retCode == 'SUCCESS'){
						uni.$u.toast('报名成功!')
						uni.navigateTo({
							url:'/pages/zgjyReportSucess/reportSuccess'
						})
					}else{
						uni.$u.toast(res.retMsg)
					}
					
					
				})
			}).catch(errors => {
				uni.$u.toast("请填写完成身份信息")
			})
		},
		change(value){
			const params = this.$utils.inputChange(this.model1.userInfo.cardNo)
			this.model1.userInfo.sex = params.sex;
		}
		 
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>

<style scoped lang="scss">

.formBox{
	padding: 20upx;
	box-sizing: border-box;
}
.btn{
	margin-top: 100upx;
	width: 690upx;
	height: 80upx;
	font-size: 34upx !important;
	color: #fff;
	  /*background-color: $base-color;*/
	border-radius: 10upx;
	  /*box-shadow: 1px 2px 5px #5088fd;*/
	background: linear-gradient(90deg, #5088FD 0%, #62B9F9 100%);
}

  ::v-deep .u-form-item__body__left__content__label[data-v-067e4733]{
	font-weight: bold;
	font-size: 30upx;
}

::v-deep .content[data-v-5492554a] .u-form-item__body__left__content__label{
		font-weight: bold;
		font-size: 30upx;
	}
</style>
